<template>
  <wd-layout-model>
    <div>
      <avue-data-tabs :option="option" />
      <ve-histogram :data="chartData" />
      <ve-amap
        :settings="chartSettings"
        :series="chartSeries"
        :tooltip="chartTooltip"
      />
    </div>
  </wd-layout-model>
</template>
<script>
export default {
  data() {
    this.chartSettings = {
      key: '4b5f2cf2cba25200cc6b68c398468899',
      v: '1.4.3',
      amap: {
        resizeEnable: true,
        center: [120.14322240845, 30.236064370321],
        zoom: 10
      }
    }
    this.chartTooltip = { show: true }
    return {
      isRotate: false,
      /**
       * 统计数据模块
       */
      option: {
        data: [
          {
            click: function(item) {
              alert(JSON.stringify(item))
            },
            title: '分类统计',
            subtitle: '实时',
            count: 7993,
            allcount: 10222,
            text: '当前分类总记录数',
            color: 'rgb(27, 201, 142)',
            key: '类'
          },
          {
            click: function(item) {
              alert(JSON.stringify(item))
            },
            title: '附件统计',
            subtitle: '实时',
            count: 3112,
            allcount: 10222,
            text: '当前上传的附件数',
            color: 'rgb(230, 71, 88)',
            key: '附'
          },
          {
            click: function(item) {
              alert(JSON.stringify(item))
            },
            title: '文章统计',
            subtitle: '实时',
            count: 908,
            allcount: 10222,
            text: '评论次数',
            color: 'rgb(178, 159, 255)',
            key: '评'
          }
        ]
      },
      /**
       * 图表
       */
      chartData: {
        columns: ['日期', '销售额'],
        rows: [
          { 日期: '1月1日', 销售额: 123 },
          { 日期: '1月2日', 销售额: 1223 },
          { 日期: '1月3日', 销售额: 2123 },
          { 日期: '1月4日', 销售额: 4123 },
          { 日期: '1月5日', 销售额: 3123 },
          { 日期: '1月6日', 销售额: 7123 }
        ]
      },
      /**
       * 地图
       */
      chartSeries: [
        {
          type: 'scatter',
          coordinateSystem: 'bmap',
          data: [
            [120, 30, 1] // 经度，维度，value，...
          ]
        }
      ]
    }
  }
}
</script>
<style>
.ve-histogram {
  width: 90%;
}
</style>
